﻿@page "/xlsio/group-shapes"
@inject Microsoft.JSInterop.IJSRuntime JS
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironmnt
@using System.IO;

@using Syncfusion.Blazor.Buttons
@*Hidden:Lines*@

@using BlazorDemos.Data.FileFormats.XlsIO

@*End:Hidden*@
@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates how to use group shapes in spreadsheets using XlsIO.</p>  
</SampleDescription>
<ActionDescription>
<p>Essential XlsIO allows to group multiple shapes and ungroup the shapes in worksheet. The IGroupShape interface is the in-memory representation of the group shapes in an Excel workbook.</p>
<p style='display: block'><b>Features:</b></p>
<p style='display: block'>This sample demonstrates the following features:</p>
<ul>
<li>Grouping multiple shapes into a single group shape.</li>
<li>Ungroup the group shape and all its inner shapes.</li>
</ul>
</ActionDescription>

<div class="control-section">
    <p style="font-weight:normal">Click the button to view an Excel spreadsheet generated by Essential XlsIO. Please note that Microsoft Excel Viewer or Microsoft Excel is required to view the resultant document.</p>

    <div class="radio-control">
        <div class="e-radio-wrapper">
            <SfRadioButton Label="Group" Name="Group" Value=@("Group") @bind-Checked="@option"></SfRadioButton>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="e-radio-wrapper">
            <SfRadioButton Label="Ungroup" Name="Ungroup" Value=@("Ungroup") @bind-Checked="@option"></SfRadioButton>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="e-radio-wrapper">
            <SfRadioButton Label="Ungroup All" Name="Ungroup All" Value=@("Ungroup All") @bind-Checked="@option"></SfRadioButton>
        </div>
    </div>
    <div class="button-section">
        <div id="button-control">
            <div class="row">
                <div>
                    <SfButton @onclick="InputDocument">Input Document</SfButton>&nbsp;
                    <SfButton @onclick="CreateDocument">Create Document</SfButton>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .radio-control {
        margin: 5% 0 2% 0;
    }

    .control-section .row {
        margin: 10px 0;
    }
</style>

@code {
    MemoryStream excelStream;
    string option = "Group";
    string button = string.Empty;

    /// <summary>
    /// Download the Excel document with group shapes
    /// </summary>
    public async Task InputDocument()
    {
        GroupShapesService service = new GroupShapesService(hostingEnvironmnt);
        button = "Input Document";
        excelStream = service.GroupShapesXlsIO(button, option);
        await JS.SaveAs("GroupShapes.xlsx", excelStream.ToArray());
    }

    /// <summary>
    /// Download the Excel document with grouped or ungrouped shapes
    /// </summary>
    public async Task CreateDocument()
    {
        GroupShapesService service = new GroupShapesService(hostingEnvironmnt);
        button = "Create Document";
        excelStream = service.GroupShapesXlsIO(button, option);
        await JS.SaveAs("Sample.xlsx", excelStream.ToArray());
    }
}
